<template>

    <!--悬浮小广告样式的提示信息-->

  <!-- <a href="http://e.baidu.com/lp/lpapply5/?refer=3069279&bd_vid=8256801514509993775">广告</a> -->




    <div>
      <div id="thediv" ref="thediv" @mouseover="clearFdAd" @mouseout="starFdAd"
       @click="selectId2()">


       <img src="../assets/Darway.png" width="150px"  height="200px"/>


      <div style="cursor: pointer;text-align: right;font-size:12px;color: #00ff00">
      </div>

      </div>
        <div class="back_add">
            <div class="threeImg">
                <div class="Containt">
                    <div class="iconleft"  @click="zuohua">
                        <i class="el-icon-arrow-left"></i>
                    </div>
                    <ul :style="{'left':calleft + 'px'}"  v-on:mouseover="stopmove()" v-on:mouseout="move()">
                        <li v-for="(item,index) in superurl" :key="index" @click="selectId()">
                            <img :src="item.img"/>
                        </li>
                    </ul>
                    <div class="iconright" @click="youhua">
                        <i class="el-icon-arrow-right" ></i>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>
<script>
var interval
  export default{
data() {
        return {
            superurl: [
                {
                    img: 'https://img0.baidu.com/it/u=3656268405,3441959350&fm=26&fmt=auto'
                },{
                    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa4c356e56a8f38dd4244e60bac4c43bc077fce481a356-avVPVr_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641700833&t=6c6fe924ed0e6c31490f37450e076fb0'
                },{
                    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.te5.com%2Fuploads%2Fallimg%2F210108%2F151-21010Q45554K2.jpg%40q_80&refer=http%3A%2F%2Fimg.te5.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641700833&t=a250b1b50f5fbd70622221f7f32533a8'
                },{
                    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi4.265g.com%2Fimages%2F201612%2F201612011114577802.jpg&refer=http%3A%2F%2Fi4.265g.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641700833&t=66100a7fca96cd8a6ddab54c71c16b75'
                },{
                    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.juxia.com%2Fupload%2F202101%2F04%2F0417300794cb5ONawPvK4k5jxrb.jpg&refer=http%3A%2F%2Fimg.juxia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641700833&t=6a01e8891e1a5adcd2fa805837a7527e'
                },{
                    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F574fd4d30cf26a1e7c3c4a7622cd50792b2ed1c3babb-K9UieQ_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641700833&t=29c290a40662fb7e7169bc0d8ef7cf29'
                }
            ],
            calleft:0,
            //坐标
            xPos:8,
            //坐标
             yPos:50,


             //速度
             step:1,

             delay:50,
             height:20,
             Hoffset:40,
             Woffset:130,
             yon:46,
             xon:30,
             pause:true,
             thedivShow: true

        }

        },
  created() {
          this.move()
      },
      mounted() {
                          //基于基础速度顺滑
        interval=setInterval(this.changePos,0)
      },
      methods: {

          changePos()
          {
              let width=document.documentElement.clientWidth;
              let height=document.documentElement.clientHeight;
              this.Hoffset=this.$refs.thediv.offsetHeight;//获取元素高度
              this.Woffset=this.$refs.thediv.offsetWidth;
              //滚动部分跟随屏幕滚动
              this.$refs.thediv.style.left=(this.xPos+document.body.scrollLeft+document.documentElement.scrollLeft)+"px";
              this.$refs.thediv.style.top=(this.yPos+document.body.scrollTop+document.documentElement.scrollTop)+"px";
              if(this.yon)
              {
                  this.yPos=this.yPos+this.step;
              }
              else
              {
                  this.yPos=this.yPos-this.step;
              }
              if(this.yPos<0)
              {
                  this.yon=1;
                  this.yPos=0;
              }
              if(this.yPos>=(height-this.Hoffset))
              {
                  this.yon=0;
                  this.yPos=(height - this.Hoffset);
              }
              if(this.xon)
              {
                  this.xPos=this.xPos + this.step;
              }
              else
              {
                  this.xPos=this.xPos - this.step;
              }
              if(this.xPos < 0)
              {
                  this.xon = 1;
                  this.xPos = 0;
              }
              if(this.xPos >= (width - this.Woffset))
              {
                  this.xon = 0;
                  this.xPos = (width - this.Woffset);
              }
          },
         selectId2() {

           this.$message.success("自动为您跳转广告")

           alert("充值就没有广告了"),
           alert("真的不考虑一下？"),

         window.location.href = "http://zh.tedu.cn/baidu/xjs/?TARENA_gdq-zh-BD-PC-PZ-zh-pp-1792079-000-000000000000_TARENA&bdpz-pc"
          },


         clearFdAd(){
          clearInterval(interval)
        },
        starFdAd(){
                                //鼠标触摸后顺滑
          interval=setInterval(this.changePos,10)
        },
        async selectId() {
       const {data: result} =  await this.$http.get('/id/getUrl')
       if(result.status !== 200) return this.$message.error("没广告？")

       this.url = result.data
     window.location.href = this.url
      },
          //移动
          move() {
              this.timer = setInterval(this.starmove, 2500)
          },
          //开始移动
          starmove() {
              this.calleft -= 340;
              if (this.calleft < -1200) {
                  this.calleft = 0
              }
          },
          //鼠标悬停时停止移动
          stopmove() {
              clearInterval(this.timer)
          },
          //点击按钮左移
          zuohua() {
              this.calleft -= 340;
              if (this.calleft < -1200) {
                  this.calleft = 0
              }
          },
          //点击按钮右移
          youhua() {
              this.calleft += 340;
              if (this.calleft > 0) {
                  this.calleft = -1020
              }
          }
      }
}

 </script>
        <style scoped>
        /*超链接图片*/
#thediv {
  z-index: 30;
  position: absolute;
  top: 60px;
  left: 222px;
  /* 高度*/
  height: 100px;
  /* 宽度*/
  width: 100px;

}
        #divAdd {
            background-color: #ededed;
            /*width: 100%;*/
            /*min-width: 1200px;*/
            width: 1000px;
            margin: 0px auto;
        }

        .divAdd-con {
            margin: 0px auto;
            width: 1000px;
            overflow: auto;
            padding: 30px 0px;
        }

        .divAdd-con img {
            float: left;
        }

        .indexrt {
            margin: 0px 40px;
        }

        .divAddleft img {
            float: left;
            margin-bottom: 7px;
        }

        .divAddleft {
            float: left;
            display: inline;
            width: 370px;
        }

        .divAddrt {
            float: right;
            display: inline;
            margin-top: 7px;
        }

        .back_add {
            background-color: #ededed;
        }

        .divAdd-con img {
            border: none;
        }


        a:focus,
        a:hover {
            color: #23527c;
        }


        .threeImg {
            height: 158px;
            background: #ededed;
            border-bottom: 3px solid #4679B2;
            min-width: 1000px;
        }

        .threeImg .Containt ul {
            margin: 0 auto;
            width: 2400px;
            position: absolute;
            left: 0px;
            cursor: pointer;
            height: 100%
        }

        .threeImg .Containt ul li {
            width: 300px;
            margin-right: 40px;
            margin-top: 10px;
            float: left;
        }

        .threeImg .Containt ul li img {
            height: 128px;
            width: 100%;
        }

        .Containt {
            position: relative;
            width: 1000px;
            height: 130px;
            overflow: hidden;
            margin: 0 auto;
        }

        .iconleft {
            position: absolute;
            width: 20px;
            height: 80px;
            top: 10px;
            z-index: 99999;
            padding-top: 48px;
            background-color: #ddd;
            vertical-align: middle;
        }

        .iconright {
            position: relative;
            left: 980px;
            top: 70px;
            background-color: #ddd;
            /*position: absolute;*/
            width: 20px;
            height: 80px;
            top: 10px;
            z-index: 99999;
            padding-top: 48px;
            background-color: #ddd;
            vertical-align: middle;
        }
        </style>
